<template>
	<view class="body">
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">头像</view>
			<view class="u-f-ac" @tap="changeAvatar">
				<image :src="avatar" mode="aspectFill" lazy-load></image>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">昵称</view>
			<view class="u-f-ac">
				<input type="text" v-model="nickname" />
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">性别</view>
			<view class="u-f-ac" @tap="changeOne('sex')">
				<view>{{sex}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">生日</view>
			<picker mode="date" :value="birthday" @change="bindDateChange" :start="startDate" :end="endDate">
				<view class="u-f-ac" >
					<view>{{birthday}}</view>
					<view class="icon iconfont icon-bianji imp"></view>
				</view>
			</picker>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">情感</view>
			<view class="u-f-ac" @tap="changeOne('qg')">
				<view>{{qg}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">职业</view>
			<view class="u-f-ac" @tap="changeOne('job')">
				<view>{{job}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="">家乡</view>
			<view class="u-f-ac" @tap="showCityPicker">
				<view>{{hometown}}</view>
				<view class="icon iconfont icon-bianji"></view>
			</view>
		</view>
		<button class="user-set-btn" type="primary" @tap="submit" >完成</button>
		<!-- 地址选择器 -->
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';

	let sex = ['不限', '男', '女'];
	let qg= ['未婚', '已婚'];
	let job = ['AP 刺客', 'AD 刺客', 'ADC', '辅助'];
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				avatar: '../../static/images/avatar/nan2.jpg',
				nickname: '高渐离',
				sex: '不限',
				birthday: '1995-11-11',
				qg: '未婚',
				job: 'AP 法师',
				hometown: '召唤师峡谷',
				pickerValueDefault: [0,0,0],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			submit(){
				
			},
			changeAvatar(){
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'],
					success: (res) => {
						this.avatar = res.tempFilePaths
					}
				})
			},
			// 改变生日
			bindDateChange(e) {
				this.birthday = e.target.value
			},
			// 打开地址选择器
			showCityPicker(){
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e){
				this.hometown = e.label;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeOne(type){
				let arr;
				switch (type){
					case 'sex':
						arr = sex;
						break;
					case 'qg':
						arr = qg;
						break;
					case 'job':
						arr = job;
						break;
					default:
						break;
				}
				uni.showActionSheet({
					itemList: arr,
					success: res => {
						switch (type){
							case 'sex':
								this.sex = arr[res.tapIndex];
								break;
							case 'qg':
								this.qg = arr[res.tapIndex];
								break;
							case 'job':
								this.job = arr[res.tapIndex];
								break;
							default:
								break;
						}
					}
				});
				
			}
		}
	}
</script>

<style>
	@import '../../common/form.css';
	.user-set-userinfo-list{
		padding: 20upx;
		border-bottom: 1upx solid #F4F4F4;
	}
	.user-set-userinfo-list>view:first-child{
		font-size: 35upx;
		font-weight: bold;
		color: #9B9B9B;
	}
	.user-set-userinfo-list>view:last-child>image{
		width: 80upx;
		height: 80upx;
		border-radius: 100%; 
	}
	.user-set-userinfo-list>view:last-child>input{
		text-align: right;
		font-size: 28upx;
	}
	.user-set-userinfo-list>view:last-child>view:last-of-type{
		margin-left: 20upx;
		color: #9B9B9B;
	}
	.imp{
		margin-left: 20upx !important;
		color: #9B9B9B !important;
	}
</style>
